<template>
    <div class="article-item">
        <van-cell :to="`/article/${article.art_id}`">
            <template #title>
                <!-- van-multi-ellipsis--l2为vant内置样式，最多显示两行，多余省略号 -->
                <div class="title van-multi-ellipsis--l2">{{ article.title }}</div>
            </template>
            <template #label>
                <div v-if="article.cover.type === 3" class="center-wrap">
                    <van-image fit="cover"  :src="img" class="center-img" v-for="(img, index) in article.cover.images" :key="index"/>
                </div>
                <div class="label-info-wrap">
                    <span>{{ article.aut_name }}</span>
                    <span>{{ article.comm_count }}评论</span>
                    <span>{{ article.pubdate | relativeTime }}</span>
                </div>
            </template>
            <template #default>
                <van-image fit="cover" :src="article.cover.images[0]" class="right-img" v-if="article.cover.type === 1" />
            </template>
        </van-cell>
    </div>
</template>

<script>
export default {
    name: 'ArticleItem',
    props: {
        article: {
            type: Object,
            required: true
        }
    }
}
</script>

<style lang="less" scoped>
.article-item {
    .right-img {
        width: 232px;
        height: 146px;
        margin-left: 25px;
    }
    .title {
        font-size: 32px;
        color: #3a3a3a;
    }
    .van-cell__value {
        flex: unset; //\去除它的flex样式设置
    }
    .label-info-wrap {
        margin-top: 8px;
        span {
            margin-right: 25px;
            font-size: 23px;
            color: #b4b4b4;
        }
    }
    .center-wrap {  
        display: flex;
        .center-img {
            flex: 1;
            height: 146px;
            // 除了最后一张图片，其他都要右内边距
            &:not(:last-child) {
                padding-right: 4px;
            }
        }
    }
}
</style>